<template>
  <div class="footer-container">
    <div class="footer-content">
      <!-- 友情链接 -->
      <div class="links">
        <h3>友情链接</h3>
        <ul>
          <li><a href="https://4399.com" target="_blank">4399官网</a></li>
          <li><a href="https://billbill.com" target="_blank">哔哩哔哩</a></li>
          <li><a href="https://baidu.com" target="_blank">百度搜索</a></li>
        </ul>
      </div>

      <!-- 联系方式 -->
      <div class="contact">
        <h3>联系方式</h3>
        <p><i class="el-icon-phone"></i> 电话：123-456-7890</p>
        <p><i class="el-icon-message"></i> 邮箱：2980105220@qq.com</p>
        <p><i class="el-icon-location"></i> 地址：人名街道宇宙村3号</p>
      </div>

      <!-- 版权说明 -->
      <div class="copyright">
        <h3>版权说明</h3>
        <p>&copy; 2023 全都有超市. All Rights Reserved.</p>
        <p>版权所有，未经授权禁止转载。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterView'
}
</script>

<style scoped lang="less">
.footer-container {
  width: 100%;
  padding: 20px 0;
  background-color: #f5f5f5;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;

  li {
    margin: 5px 0;

    a {
      color: #333;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

p {
  margin: 5px 0;
  color: #666;

  i {
    margin-right: 5px;
  }
}
</style>